﻿@{Html.Telerik().Splitter().Name("Splitter")
      .HtmlAttributes(new { style = "height: 300px; width: 500px; float: left; margin-bottom: 2em;" })
      .Panes(panes =>
      {
          panes.Add()
              .Collapsible(true)
              .Content(@<p>Left pane</p>);

          panes.Add()
              .Content(@<p>Center pane</p>);

          panes.Add()
              .Collapsible(true)
              .Content(@<p>Right pane</p>);
      })
      .Render();
}
    
@using (Html.Configurator("Client API").Begin()) { 
    <p>
        <button onclick="ExpandPane()" class="t-button">Expand 1<sup>st</sup> pane</button> /
        <button onclick="CollpasePane()" class="t-button">Collapse 1<sup>st</sup> pane</button><br />
        <button onclick="TogglePane()" class="t-button">Toggle 1<sup>st</sup> pane</button>
    </p>

    <label for="paneSize">Pane size:</label>
    @(Html.Telerik().NumericTextBox()
          .Name("paneSize")
          .DecimalDigits(0)
          .HtmlAttributes(new { style = "margin-right: 1em;" })
          .InputHtmlAttributes(new { style = "width: 40px;" })
          .Value(100)
          .MinValue(50)
          .MaxValue(200)
    )

    <button onclick="SetPaneSize()" class="t-button">Set 3<sup>rd</sup> pane size</button>
 } 

<script type="text/javascript">
		
	function ExpandPane() {
	    var splitter = $("#Splitter").data("tSplitter");

	    splitter.expand(".t-pane:first");
	}

	function CollpasePane() {
	    var splitter = $("#Splitter").data("tSplitter");

	    splitter.collapse(".t-pane:first");
	}

	function TogglePane() {
	    var splitter = $("#Splitter").data("tSplitter");

	    splitter.toggle(".t-pane:first");
	}

    function SetPaneSize() {
	    var splitter = $("#Splitter").data("tSplitter");

	    splitter.size(".t-pane:last", $("[name='paneSize']").val() + "px");
    }

</script>

@section HeadContent {
    <style type="text/css">
		
	    .example .configurator
	    {
	        width: 300px;
	        float: right;
	        display: inline;
	    }
	    
	    .configurator p
	    {
	        margin: 0;
	        padding: .4em 0;
	    }
	    
	    .configurator .t-button
	    {
	        display:inline-block;
	        width:auto;
	    }
	    
    </style>
}

